import 'package:bot_toast/bot_toast.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wallpaper/components/button/normal_button.dart';
import 'package:wallpaper/providers/setting_provider.dart';

class SettingsOptions extends StatefulWidget {
  const SettingsOptions({super.key});

  @override
  State<SettingsOptions> createState() => _SettingsOptionsState();
}

class _SettingsOptionsState extends State<SettingsOptions> {
  // 存储当前滑块值
  late double _paddingValue;
  late double _radiusValue;

  @override
  void initState() {
    super.initState();
    // 初始化滑块值
    final options = Provider.of<SettingProvider>(context, listen: false);
    _paddingValue = options.padding;
    _radiusValue = options.radius;
  }

  // 验证并更新参数
  void _updateOptions(SettingProvider options) {
    try {
      options.padding = _paddingValue;
      options.radius = _radiusValue;
      // 保存到本地存储
      options.updateSettings();
    } catch (e) {
      BotToast.showText(text: e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context).colorScheme;
    final options = Provider.of<SettingProvider>(context);
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        backgroundColor: theme.primaryContainer,
        surfaceTintColor: theme.primaryContainer,
        elevation: 0,
        title: Text(
          '参数设置',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              theme.surface.withOpacity(0.95),
              theme.surfaceVariant.withOpacity(0.5),
            ],
          ),
        ),
        child: Padding(
          padding: EdgeInsets.all(8),
          child: ListView(
            children: [
              // 内边距设置
              _buildSliderSection(
                title: '内边距',
                value: _paddingValue,
                onChanged: (value) => setState(() => _paddingValue = value),
                unit: 'px',
                description: '控制组件内部的留白空间',
                icon: Icons.padding,
              ),
              SizedBox(height: 12),
              // 圆角半径设置
              _buildSliderSection(
                title: '圆角半径',
                value: _radiusValue,
                onChanged: (value) => setState(() => _radiusValue = value),
                unit: 'px',
                description: '控制组件边角的圆润程度',
                icon: Icons.rounded_corner,
              ),
              SizedBox(height: 12),
              Row(
                spacing: 10,
                children: [
                  Expanded(
                    child: NormalButton(
                      title: '恢复默认',
                      radius: 2,
                      bgColor: Colors.grey,
                      onPressed: () {
                        options.resetToDefaults();
                        // 更新输入框显示
                        _paddingValue = options.padding;
                        _radiusValue = options.radius;
                        BotToast.showText(text: '已恢复默认');
                      },
                    ),
                  ),
                  Expanded(
                    child: NormalButton(
                      title: '确定修改',
                      radius: 2,
                      onPressed: () {
                        _updateOptions(options);
                        BotToast.showText(text: '修改成功');
                      },
                    ),
                  ),
                ],
              ),
              SizedBox(height: 12),
            ],
          ),
        ),
      ),
    );
  }

  // 构建滑块设置区域
  Widget _buildSliderSection({
    required String title,
    required double value,
    required ValueChanged<double> onChanged,
    required String unit,
    required String description,
    required IconData icon,
  }) {
    final theme = Theme.of(context).colorScheme;
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: theme.primaryContainer,
        borderRadius: BorderRadius.circular(5),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题和图标
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: theme.primaryContainer,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(
                  icon,
                  color: theme.primary,
                  size: 20,
                ),
              ),
              const SizedBox(width: 6),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
                            fontWeight: FontWeight.bold,
                            color: theme.onSurface,
                          ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      description,
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            color: Theme.of(context)
                                .colorScheme
                                .onSurface
                                .withOpacity(0.7),
                            height: 1.4,
                          ),
                    ),
                  ],
                ),
              ),
              Text(
                '${value.round()} $unit',
                style: Theme.of(context).textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: theme.primary,
                    ),
              ),
            ],
          ),

          const SizedBox(height: 8),

          // 滑块控件
          Row(
            children: [
              Expanded(
                child: SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    trackHeight: 6,
                    activeTrackColor: theme.primary,
                    inactiveTrackColor:
                        theme.surfaceVariant,
                    thumbShape:
                        const RoundSliderThumbShape(enabledThumbRadius: 12),
                    overlayColor:
                        theme.primary.withOpacity(0.1),
                    trackShape: const RoundedRectSliderTrackShape(),
                    valueIndicatorTextStyle: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  child: Slider(
                    value: value,
                    min: 0,
                    max: 50,
                    divisions: 50,
                    label: '${value.round()} $unit',
                    onChanged: onChanged,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
